<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
<style>
#app {
  border: dashed black 1px;
  display: inline-block;
  padding-bottom: 10px;
}

#app > button {
  display: block;
  margin: auto;
}

#lightDiv {
  position: relative;
  width: 150px;
  height: 150px;
}

#lightDiv > img {
  position: relative;
  width: 100%;
  height: 100%;
}

#lightDiv > div {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background-color: yellow;
}

.classA {
    color: red;
	font-size:30px;
}

</style>
</head>
<body>
<div id="app">
  <div id="lightDiv">
    <div v-show="lightOn"></div>
    <img src="https://static.runoob.com/images/svg/img_lightBulb.svg">
  </div>
  <button v-on:click=" lightOn =! lightOn ">开/关</button>

  <runoob class="classA"></runoob>

  <br>
  <select v-model="selected">
    <option v-for="option in options" :value="option.value">
      {{option.text}}
    </option>
  </select>
  <span>the chosen one is : {{selected}}</span>


  <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>

    <div v-runoob="{ name: '菜鸟教程', url: 'www.runoob.com' ,color: 'green', text: '菜鸟教程!'}"></div>



</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      lightOn: false,
      selected: 'www.runoob.com',
      options:[
        { text: 'Runoob', value: 'www.runoob.com' },
        { text: 'Google', value: 'www.google.com' },
        { text: 'Taobao', value: 'www.taobao.com' }
      ]
    }
  }
})

app.component('runoob',{
  template:`
  <p :class="$attrs.class">good story</p>
  <span>child component</span>
  `
})

app.directive('focus',{
  // 当被绑定的元素挂载到 DOM 中时……
  mounted(el){
    //聚焦元素
    el.focus()
  }
})

app.directive('runoob', (el, binding, vnode) => {
  console.log(binding.value.name) // => "菜鸟教程"
  console.log(binding.value.url) // => "www.runoob.com"
  var s = JSON.stringify
  el.innerHTML = s(binding.value)
  el.style.backgroundColor = binding.value.color
})

app.mount('#app')

</script>

</body>
</html>